<template>
    <div id="userDiv">
        <!--搜索小区-->
        <div class="searchInf">
            <div class="demo-input-suffix" >
                用户名 :
                <input type="text" v-model="input1" placeholder="请输入小区名" style="height: 39px;border: 1px solid lightgray;border-radius: 6px">


                <span style="margin-left: 20px"> <el-button type="primary"  @click="searchUser">搜索</el-button> </span>

        </div>
    </div>

        <!--        新增小区    -->
        <div class="addBtn">
        <el-button type="text" @click="dialogFormVisible = true">新增用户</el-button>

        <el-dialog title="新增用户-务必填写职位代码!2:咨询师,3:普通用户" :visible.sync="dialogFormVisible" >
            <el-form :model="form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"  ></el-input>
                </el-form-item>
                <el-form-item label="职位昵称" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择职位">
                        <el-option label="咨询师" value="咨询师"></el-option>
                        <el-option label="普通用户" value="普通用户"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职位代码" :label-width="formLabelWidth">
                    <el-input v-model="form.role" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>
        </div>
<!--编辑-->
        <div class="addBtn">


            <el-dialog title="新增用户-务必填写职位代码!2:咨询师,3:普通用户" :visible.sync="dialogFormVisible2">
                <el-form :model="form2">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form2.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form2.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="职位昵称" :label-width="formLabelWidth">
                        <el-select v-model="form2.region" placeholder="请选择职位">
                            <el-option label="咨询师" value="咨询师"></el-option>
                            <el-option label="普通用户" value="普通用户"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input v-model="form2.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="form2.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="职位代码" :label-width="formLabelWidth">
                        <el-input v-model="form2.role" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="updateuser" >确 定</el-button>
                </div>
            </el-dialog>
        </div>



        <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="昵称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick2(scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click="remove(scope.$index)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage2"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>







    </div>
</template>
<script>
    export default {
        methods: {
            handleClick2(index) {
              this.dialogFormVisible2=true
                this.form2.id=this.tableData[index].id
                this.form2.name=this.tableData[index].username
                this.form2.phone = this.tableData[index].phone
                this.form2.email=this.tableData[index].email
                this.form2.password=this.tableData[index].password
                this.form2.role = this.tableData[index].role
                this.form2.region = this.tableData[index].nickname
                console.log(row);
            },
            updateuser(){
               this.dialogFormVisible2 = false;
                this.axios.post("/user/updateuser",{
                    id:this.form2.id,
                    username: this.form2.name,
                    password: this.form2.password,
                    nickname: this.form2.region,
                    email: this.form2.email,
                    phone: this.form2.phone,
                    role: this.form2.role
                })
            },

            handleClick(row) {
                this.dialogFormVisible=true
                console.log(row);
            },
            addUser() {
                this.dialogFormVisible = false;
                console.log()
                this.axios.post("/user/insertUser", {

                    username: this.form.name,
                    password: this.form.password,
                    nickname: this.form.region,
                    email: this.form.email,
                    phone: this.form.phone,
                    role: this.form.role
                }).then((res) => {
                    this.axios.get("/user/AllUserList",{
                        params: {
                            pageNum:this.currentPage2,
                            pageSize:this.pageSize,
                        },
                    }).then((res)=>{
                        this.tableData=res.data.data
                        console.log(this.tableData)
                    })
                    })





            },
            searchUser(){
                this.axios.get("/user/usernamelike",{
                    params: {
                        username: this.input1

                    }

                }).then((res)=>{
                  this.tableData=res.data.data
                })
            },
        //    删除
            remove(index){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post("/user/deleteuserById",{

                            id:this.tableData[index].id


                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        //    分页
            handleSizeChange(val) {
                this.pageSize= val;
                this.axios.get("/user/AllUserList",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res)=>{
                    this.tableData=res.data.data
                    console.log(this.tableData)
                })
            },
            handleCurrentChange(val) {
                this.currentPage2=val;
                this.axios.get("/user/AllUserList",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res)=>{
                    this.tableData=res.data.data
                    console.log(this.tableData)
                })
            },


        },

        data() {
            return {
                currentPage2:1,
                pageNum: 1,
                pageSize:5,




                tableData:[],
                input1:"",
                dialogFormVisible: false,
                form: {
                    name: '',
                    password:"",
                    region: '',
                    email:"",
                    phone:"",
                    delivery: false,
                    type: [],
                    role:"",

                },
                form2: {
                    name: '',
                    password:"",
                    region: '',
                    email:"",
                    phone:"",
                    delivery: false,
                    type: [],
                    role:"",
                    id:""
                },
                username:"",
                dialogFormVisible2:false
            }
        },

    created() {
            this.axios.get("/user/AllUserList",{
                params: {
                    pageNum:this.currentPage2,
                    pageSize:this.pageSize,
                },
            }).then((res)=>{
this.tableData=res.data.data
                console.log(this.tableData)
            })
    }

    }

</script>

<style scoped>
    .xiaoqu{
        padding: 20px 20px 20px 0;
    }
    .demo-input-suffix,.block{
        float: left;
        line-height: 39px;
        margin: 15px;

    }
    .addInf,.searchInf{
        margin-top: 30px;
        width: 100%;
        float: left;
    }
    .addBtn{
        margin: 15px;
font-size: 30px;
    }
    el-table{
        margin: 10px auto;
    }
</style>